<template>
  <div class="row">
    <!--菜单-->
    <div class="col-sm-12 col-md-8">
      <table class="table">
        <thead class="thead-default">
          <tr>
            <th>尺寸</th>
            <th>价格</th>
            <th>加入</th>
          </tr>
        </thead>
        <tbody v-for="item in getMenuItems" :key="item.name">
          <tr>
            <td>
              <strong>{{item.name}}</strong>
            </td>
          </tr>
          <tr v-for="option in item.options" :key="option.size">
            <td>{{option.size}}</td>
            <td>{{option.price}}</td>
            <td>
              <button class="btn btn-sm btn-outline-success" @click="addToBasket(item,option)">+</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!--购物车-->
    <div class="col-sm-12 col-md-4">
      <div v-if="baskets.length > 0">
        <table class="table">
          <thead class="thead-default">
            <tr>
              <th>数量</th>
              <th>品种</th>
              <th>价格</th>
            </tr>
          </thead>
          <tbody v-for="(item,index) in baskets" :key="index">
            <tr>
              <td>
                <button @click="decreaseQuantity(item)" class="btn btn-sm">-</button>
                <span>{{item.quantity}}</span>
                <button @click="increaseQuantity(item)" class="btn btn-sm">+</button>
              </td>
              <td>{{item.name}}{{item.size}}</td>
              <td>{{item.price * item.quantity}}</td>
            </tr>
          </tbody>
        </table>
        <p>总价：{{total + 'RMB'}}</p>
        <button class="btn btn-success btn-block">提交</button>
      </div>
      <div v-else>{{basketText}}</div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  data() {
    return {
      baskets: [],
      basketText: "购物车没有任何商品",
      // getMenuItems: {
      //   // 1: {
      //   //   name: "榴莲Pizza",
      //   //   description: "这是喜欢吃榴莲的朋友最佳的选择",
      //   //   options: [
      //   //     {
      //   //       size: 9,
      //   //       price: 38,
      //   //     },
      //   //     {
      //   //       size: 12,
      //   //       price: 48,
      //   //     },
      //   //   ],
      //   // },
      //   // 2: {
      //   //   name: "芝士Pizza",
      //   //   description: "芝士杀手，浓浓的芝士丝，食欲瞬间爆棚",
      //   //   options: [
      //   //     {
      //   //       size: 9,
      //   //       price: 38,
      //   //     },
      //   //     {
      //   //       size: 12,
      //   //       price: 48,
      //   //     },
      //   //   ],
      //   // },
      //   // 3: {
      //   //   name: "夏威夷Pizza",
      //   //   description: "众多人的默认选择",
      //   //   options: [
      //   //     {
      //   //       size: 9,
      //   //       price: 38,
      //   //     },
      //   //     {
      //   //       size: 12,
      //   //       price: 48,
      //   //     },
      //   //   ],
      //   // },
      // },
    };
  },
  computed: {
    getMenuItems() {
      //在vuex中获取数据
      //1.不用getters，直接暴露state下的属性获取
      // return this.$store.state.menuItems;

      //2.通过getters获取数据
      return this.$store.getters.getMenuItems;
    },
    total() {
      let totalCost = 0;
      for (let index in this.baskets) {
        let indevidualItem = this.baskets[index];
        totalCost += indevidualItem.quantity * indevidualItem.price;
      }
      return totalCost;
    },
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      // fetch("拿到数据展示/menu.json")
      //   .then((res) => {
      //     return res.json();
      //   })
      //   .then((data) => {
      //     this.getMenuItems = data;
      //   });

      //axios引入数据
      // axios.get("menu.json").then((res) => (this.getMenuItems = res.data));

      //配置完原型后，不需要要import引入直接写
      // this.http.get("menu.json")
      // .then((res) => (this.getMenuItems = res.data));

      //将请求下来的数据存储到vuex中
      this.http.get("menu.json").then((res) => {
        this.$store.commit("setMenuItems", res.data);
      });
    },
    addToBasket(item, option) {
      let basket = {
        name: item.name,
        size: option.size,
        price: option.price,
        quantity: 1, //数量
      };
      if (this.baskets.length > 0) {
        //过滤
        let result = this.baskets.filter((basket) => {
          return basket.name === item.name && basket.price === option.price;
        });
        if (result != null && result.length > 0) {
          result[0].quantity++;
        } else {
          this.baskets.push(basket);
        }
      } else {
        this.baskets.push(basket);
      }
    },
    decreaseQuantity(item) {
      item.quantity--;
      if (item.quantity <= 0) {
        this.removeFromBasket(item);
      }
    },
    increaseQuantity(item) {
      item.quantity++;
    },
    removeFromBasket(item) {
      this.baskets.splice(this.baskets.indexOf(item), 1);
      console.log(this.baskets.indexOf(item), 1111);
    },
  },
};
</script>

<style scoped>
</style>
